<script setup>
import { ref,reactive, onMounted } from 'vue'
import {all,add,del,editPwd,editManager}  from '../../api/manager.js'
import {all as AllRole}  from '../../api/role.js'
import {ElMessageBox} from 'element-plus';

const state = reactive(
  {
    form:{},
    editForm:{},
    roleList:'',
    role:[]

  }
);
const visible = ref(false);
const editFormVisible = ref(false);
const editPasswordVisible = ref(false);


const handleAdd = (data)=>{
	visible.value = true;
}
const handleDel = (index,row)=>{

   ElMessageBox.confirm("确认删除？","删除提示",
        {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning',
       }).then(()=>{
           del({id:row.id}).then(res=>{})
     });
	
}

const handleEditPassword = (index,row)=>{
  editPasswordVisible.value = true;
  state.editForm = row;
}

const handleEdit = (row)=>{
  editFormVisible.value = true;
  state.editForm = row;

}
const onEditPwdSubmit = ()=>{
  editPwd({id:state.editForm.id,password:state.editForm.password}).then(res=>{
  });
}
const onEditSubmit = ()=>{
  editManager({id:state.editForm.id,name:state.editForm.name,role_id:state.editForm.role_id,email:state.editForm.email}).then(res=>{
  });
}
onMounted(()=>{
 	all().then(res=>{
 		if(res.code == 200) {
 			state.manager = res.data
 		}
 	});
  AllRole().then(res=>{
     state.role = res.data;
  })
});

const onSubmit = ()=>{
  add(state.form).then(res=>{

  })
}
</script>

<template>
 <el-row class="mb-4">
    <el-button type="success" @click="handleAdd">添加</el-button>
  </el-row>
   <el-table :data="state.manager" stripe style="width: 100%">
    <el-table-column type="selection" width="55" />
    <el-table-column prop="name" label="管理员名" width="180" />
    <el-table-column prop="account" label="账号" width="180" />
    <el-table-column prop="email" label="邮件" width="180" />
    <el-table-column prop="role.name" label="角色" width="180" />
    <el-table-column fixed="right" label="操作" width="320">
      <template #default="scope">
        <el-button type="primary" size="small" @click="handleEditPassword(scope.$index,scope.row)">修改密码</el-button>
        <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
        <el-button type="danger" size="small" @click="handleDel(scope.$index,scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

<!-- 修改密码 -->

  <el-dialog v-model="editPasswordVisible" :show-close="false">
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <h4 :id="titleId" :class="titleClass">修改密码!</h4>
      </div>
    </template>
      <el-form :model="state.editForm" label-width="120px">
            <el-form-item label="管理员名">
              <el-input v-model="state.editForm.name" disabled />
            </el-form-item>
            <el-form-item label="管理员名">
              <el-input v-model="state.editForm.account" disabled />
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="state.editForm.password" />
            </el-form-item>
          </el-form>
       <el-form-item>
        <el-button type="primary" @click="onEditPwdSubmit">保存</el-button>
        <el-button type="danger" @click="editFormVisible = false">
          <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
          Close
        </el-button>
      </el-form-item>
  </el-dialog>

<!-- 修改管理员信息 -->
<el-dialog v-model="editFormVisible" :show-close="false">
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <h4 :id="titleId" :class="titleClass">修改密码!</h4>
      </div>
    </template>
    {{state.editForm}}
      <el-form :model="state.editForm" label-width="120px">
           
            <el-form-item label="管理员账号">
              <el-input v-model="state.editForm.account" disabled />
            </el-form-item>
             <el-form-item label="管理员名">
              <el-input v-model="state.editForm.name" />
            </el-form-item>
            <el-form-item label="Email">
              <el-input v-model="state.editForm.email" />
            </el-form-item>
             <el-form-item label="选择角色">
              <el-select v-model="state.editForm.role_id" placeholder="请选择" size="large" >
                <el-option  v-for="item in state.role"
                 :label="item.name"
                 :value="item.id"
                 :key="item.id" />
              </el-select>
            
            </el-form-item>
          </el-form>
       <el-form-item>
        <el-button type="primary" @click="onEditSubmit">保存</el-button>
        <el-button type="danger" @click="editFormVisible = false">
          <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
          Close
        </el-button>
      </el-form-item>
  </el-dialog>

  <!-- 添加管理员 -->


  <el-dialog v-model="visible" :show-close="false">
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <h4 :id="titleId" :class="titleClass">添加管理员</h4>
        
      </div>
    </template>
      <el-form :model="state.form" label-width="120px">
            <el-form-item label="管理员名">
              <el-input v-model="state.form.name" />
            </el-form-item>
              <el-form-item label="管理员账号">
              <el-input v-model="state.form.account" />
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="state.form.password" />
            </el-form-item>
            <el-form-item label="选择角色">
              <el-select v-model="state.form.role_id" placeholder="请选择" size="large" >
                <el-option  v-for="item in state.role"
                 :label="item.name"
                 :value="item.id"
                 :key="item.id" />
              </el-select>
            
            </el-form-item>
          </el-form>
       <el-form-item>
        <el-button type="primary" @click="onSubmit">Create</el-button>
        <el-button type="danger" @click="visible = false">
          <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
          Close
        </el-button>
      </el-form-item>
  </el-dialog>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
.titleClass{
  color: red;
}
</style>
